<template>
  <div id="personal">
    <el-container>
      <el-header height="80px">
        <el-row>
          <el-col :span="3" id="logo" offset="2">我的淘物</el-col>
          <el-col :span="3" id="logo" offset="4">
            <el-dropdown>
              <span class="el-dropdown-link">
                首页<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>订单中心</el-dropdown-item>
                <el-dropdown-item>我的钱包</el-dropdown-item>
                <el-dropdown-item>我的关注</el-dropdown-item>
                <el-dropdown-item>我的活动</el-dropdown-item>
                <el-dropdown-item>客户服务</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col :span="3" id="logo">
            <el-dropdown>
              <span class="el-dropdown-link">
                账户设置<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>账户安全</el-dropdown-item>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>收货地址</el-dropdown-item>
                <el-dropdown-item>我的银行卡</el-dropdown-item>
                <el-dropdown-item>账户绑定</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col :span="3" offset="5" class="search">
            <input type="text" placeholder="" class="search_text" />
            <i class="search_button">搜索</i>
          </el-col>
          <el-col :span="4">
            <el-col :span="15" class="shopping_cart">
              <el-col :span="7" class="shopping_cart_icon"
                ><img src="../../assets/images/购物车.png" alt=""
              /></el-col>
              <el-col :span="11" class="shopping_cart_text">我的购物车</el-col>
              <div class="shopping_cart_num">2</div>
            </el-col>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <el-row>
      <el-col :span="20" id="wrapper" offset="2">
        <el-col :span="4" id="left">
          <div id="left_text">
            <div id="left_text_1">
              <div id="left_text_title">订单中心</div>
              <div id="left_text_item">我的订单</div>
              <div id="left_text_item">评价晒单</div>
            </div>
            <div id="left_text_2">
              <div id="left_text_title">我的钱包</div>
              <div id="left_text_item">优惠券</div>
              <div id="left_text_item">红包</div>
              <div id="left_text_item">礼品卡</div>
              <div id="left_text_item">更多></div>
            </div>
            <div id="left_text_3">
              <div id="left_text_title">我的关注</div>
              <div id="left_text_item">关注商品</div>
              <div id="left_text_item">关注店铺</div>
            </div>
            <!-- <a @click="goConcern">aaaaaaa</a> -->
            <div id="left_text_4">
              <div id="left_text_title">我的活动</div>
              <div id="left_text_item">我的预约</div>
              <div id="left_text_item">我的回收单</div>
              <div id="left_text_item">我的拍卖</div>
              <div id="left_text_item">我的口令</div>
              <div id="left_text_item">更多></div>
            </div>
            <div id="left_text_5">
              <div id="left_text_title">客户服务</div>
              <div id="left_text_item">返修退换货</div>
              <div id="left_text_item">价格保护</div>
              <div id="left_text_item">我的发票</div>
              <div id="left_text_item">购买咨询</div>
              <div id="left_text_item">交易纠纷</div>
              <div id="left_text_item">更多></div>
            </div>
            <div id="left_text_6">
              <div id="left_text_title">特色业务</div>
              <div id="left_text_item">我的营业厅</div>
              <div id="left_text_item">医疗服务</div>
              <div id="left_text_item">流量加油站</div>
              <div id="left_text_item">更多></div>
            </div>
          </div>
        </el-col>
        <el-col :span="20" id="right">
          <el-col :span="21" id="right_top">
            <el-col :span="6" id="right_top_left">
              <center>
                <img
                  src="../../assets/images/10001.jpg"
                  alt=""
                  id="right_top_left_img"
                />

                <div id="right_top_left_text">{{userName}}</div>

                <div id="right_top_left_label">乐享值 1942</div>
                <div id="right_top_left_label">开启小白守约特权</div>
              </center>
            </el-col>
            <el-col :span="18" id="right_top_right">
              <div id="right_top_right_top">
                <div id="right_top_right_top_text">我的商品</div>
              </div>
              <div id="right_top_right_bottom">
                <el-row :gutter="20">
                  <el-col :span="6"
                    ><div class="right_top_right_bottom_grid">
                      <center>
                        <img
                          src="../../assets/images/我发布的.png"
                          class="right_top_right_bottom_grid_icon"
                        @click="goPublish" />
                        <div class="right_top_right_bottom_grid_num">3</div>
                        <div class="right_top_right_bottom_grid_text">
                          我发布的
                        </div>
                      </center>
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="right_top_right_bottom_grid">
                      <center>
                        <img
                          src="../../assets/images/我卖出的.png"
                          class="right_top_right_bottom_grid_icon"
                        />
                        <div class="right_top_right_bottom_grid_num">22</div>
                        <div class="right_top_right_bottom_grid_text">
                          我卖出的
                        </div>
                      </center>
                    </div></el-col
                  >
                  <a @click="goConcern">我的关注</a>
                  <el-col :span="6"
                    ><div class="right_top_right_bottom_grid">
                      <center>
                        <img
                          src="../../assets/images/我收到的.png"
                          class="right_top_right_bottom_grid_icon"
                        />
                        <div class="right_top_right_bottom_grid_num">47</div>
                        <div class="right_top_right_bottom_grid_text">
                          我买到的
                        </div>
                      </center>
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="right_top_right_bottom_grid">
                      <center>
                        <img
                          src="../../assets/images/我可转卖的.png"
                          class="right_top_right_bottom_grid_icon"
                        />
                        <div class="right_top_right_bottom_grid_num">0</div>
                        <div class="right_top_right_bottom_grid_text">
                          我可转卖的
                        </div>
                      </center>
                    </div></el-col
                  >
                </el-row>
              </div>
            </el-col>
          </el-col>
          <el-col :span="21" id="right_bottom">
            <el-col :span="17" id="right_bottom_left">
              <div id="right_bottom_right_top_top">
                <div id="right_bottom_right_top_top_text">我的订单</div>
              </div>
              <el-row>
                <el-col
                  :span="3"
                  class="right_bottom_left_item"
                  v-for="item in right_bottom_left_item"
                  :key="item.id"
                >
                  <img
                    :src="item.imgurl"
                    alt=""
                    class="right_bottom_left_item_icon"
                  />
                  <div class="right_bottom_left_item_text">
                    {{ item.text }}
                  </div>
                </el-col>
              </el-row>
              <el-empty
                description="您买的东西太少了，这里都空空的，快去挑选合适的商品吧！"
              ></el-empty>
            </el-col>
            <el-col :span="7" id="right_bottom_right">
              <el-col :span="22" id="right_bottom_right_top" offset="2">
                <div id="right_bottom_right_top_top">
                  <div id="right_bottom_right_top_top_text">我的关注</div>
                </div>
                <div id="right_bottom_right_top_bottom">
                  <el-col :span="12" id="right_bottom_right_top_item">
                    <center>
                      <div class="right_bottom_right_top_item_num">11</div>
                      <div class="right_bottom_right_top_item_text">
                        商品关注
                      </div>
                    </center>
                  </el-col>
                  <el-col :span="12" id="right_bottom_right_top_item">
                    <center>
                      <div class="right_bottom_right_top_item_num">15</div>
                      <div class="right_bottom_right_top_item_text">
                        店铺关注
                      </div>
                    </center>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="22" id="right_bottom_right_bottom" offset="2">
                <div id="right_bottom_right_top_top">
                  <div id="right_bottom_right_top_top_text">生活服务</div>
                </div>
                <el-row>
                  <el-col
                    :span="8"
                    class="right_bottom_right_bottom_item"
                    v-for="item in right_bottom_right_bottom_item"
                    :key="item.id"
                  >
                    <img
                      :src="item.imgurl"
                      alt=""
                      class="right_bottom_right_bottom_item_icon"
                    />
                    <div class="right_bottom_right_bottom_item_text">
                      {{ item.text }}
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "personal",
  
  data() {
    return {
      
      right_bottom_right_bottom_item: [
        {
          id: 1,
          imgurl: require("../../assets/images/加油卡.png"),
          text: "加油卡",
        },
        {
          id: 2,
          imgurl: require("../../assets/images/机票.png"),
          text: "机票",
        },
        {
          id: 3,
          imgurl: require("../../assets/images/游戏.png"),
          text: "游戏",
        },
        {
          id: 4,
          imgurl: require("../../assets/images/电影票.png"),
          text: "电影票",
        },
        {
          id: 5,
          imgurl: require("../../assets/images/话费.png"),
          text: "话费",
        },
        {
          id: 6,
          imgurl: require("../../assets/images/酒店.png"),
          text: "酒店",
        },
      ],
      right_bottom_left_item: [
        {
          id: 1,
          imgurl: require("../../assets/images/已出货.png"),
          text: "已出货",
        },
        {
          id: 2,
          imgurl: require("../../assets/images/已售出.png"),
          text: "已售出",
        },
        {
          id: 3,
          imgurl: require("../../assets/images/待转卖.png"),
          text: "待转卖",
        },
        {
          id: 4,
          imgurl: require("../../assets/images/待付款.png"),
          text: "待付款",
        },
        {
          id: 5,
          imgurl: require("../../assets/images/待收货.png"),
          text: "待收货",
        },
        {
          id: 6,
          imgurl: require("../../assets/images/待评价.png"),
          text: "待评价",
        },
        {
          id: 7,
          imgurl: require("../../assets/images/售后.png"),
          text: "售后",
        },
        {
          id: 8,
          imgurl: require("../../assets/images/全部订单.png"),
          text: "全部订单",
        },
      ],
      userName:sessionStorage.getItem("username"),
    };
  },
  mounted() {
    
  },
  methods:{
    goPublish(){
      this.$router.push("/publish")
    },
    goConcern(){
      this.$router.push("/concern")
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: rgb(240, 243, 239);
}
#personal {
  background-color: rgb(240, 243, 239);
}

#wrapper {
  height: 1000px;
}

/* 左侧导航栏 */
#left {
  background-color: rgb(240, 243, 239);
}
#left_text {
  width: 80%;
  height: 100%;
  background-color: white;
}
#left_text_1,
#left_text_2,
#left_text_3,
#left_text_4,
#left_text_5,
#left_text_6 {
  border-bottom: 1px solid rgb(192, 192, 192, 0.2);
  width: 100%;
  padding: 20px 0px;
}
#left_text_title {
  margin-left: 15px;
  font-size: 17px;
  font-weight: bold;
}
#left_text_item {
  margin-top: 10px;
  margin-left: 15px;
  font-size: 15px;
}

/* 右侧内容部分 */
#right {
  height: 1000px;
  margin-top: 30px;
  /* background-color: yellow; */
}
#right_top {
  height: 250px;
  width: 100%;
  /* background-color: white; */
}
/* 左侧用户信息 */
#right_top_left {
  height: 100%;
  background-color: rgb(226, 35, 26);
}
#right_top_left_img {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  margin-top: 30px;
  background-color: yellow;
  display: inline-block;
}
#right_top_left_text {
  margin-top: 18px;
  color: white;
  font-weight: bold;
  font-size: 19px;
}
#right_top_left_label {
  height: 22px;
  margin-top: 18px;
  color: white;
  font-size: 12px;
  padding: 0 5px;
  line-height: 22px;
  border: #fff solid 1px;
  margin-left: 5px;
  border-radius: 1.5rem;
  display: inline-block;
}
/* 右侧用户钱包 */
#right_top_right {
  height: 230px;
  margin-top: 10px;
  background-color: white;
}
#right_top_right_top {
  font-size: 16px;
  color: #333;
  font-weight: 400;
  height: 55px;
  line-height: 55px;
  border-bottom: rgb(192, 192, 192, 0.2) solid 1px;
}
#right_top_right_top_text {
  margin-left: 30px;
}
.right_top_right_bottom_grid_num {
  padding-top: 10px;
  height: 24px;
  line-height: 24px;
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-top: 10px;
}
.right_top_right_bottom_grid_text {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  color: #333;
  margin-top: 10px;
}
.right_top_right_bottom_grid_icon {
  height: 35px;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #4184e8;
  margin-top: 20px;
}
#right_bottom {
  margin-top: 30px;
  height: 500px;
  width: 100%;
}
#right_bottom_left {
  height: 500px;
  background-color: #fff;
}
#right_bottom_right {
  height: 500px;
  background-color: rgb(240, 243, 239);
}
#right_bottom_right_top {
  height: 160px;
  background-color: #fff;
}
#right_bottom_right_top_top {
  font-size: 16px;
  color: #333;
  font-weight: 400;
  height: 55px;
  line-height: 55px;
  border-bottom: rgb(192, 192, 192, 0.2) solid 1px;
}
#right_bottom_right_top_top_text {
  margin-left: 10px;
}
.right_bottom_right_top_item_num {
  height: 60px;
  line-height: 70px;
  color: #666;
  font-size: 16px;
  list-style: none;
}
.right_bottom_right_top_item_text {
  height: 60px;
  line-height: 20px;
  list-style: none;
  color: #666;
  font-size: 12px;
}
#right_bottom_right_bottom {
  height: 400px;
  margin-top: 20px;
  background-color: #fff;
}
.right_bottom_right_bottom_item {
  border: rgb(192, 192, 192, 0.2) 1px solid;
  height: 90px;
}
.right_bottom_right_bottom_item_icon {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  margin-left: 30px;
  margin-top: 15px;
}
.right_bottom_right_bottom_item_text {
  color: rgb(239, 180, 57);
  text-align: center;
}
.right_bottom_left_item_icon {
  height: 50px;
  width: 50px;
  margin-left: 23px;
  margin-top: 25px;
  margin-bottom: 5px;
}
.right_bottom_left_item_text {
  color: #333;
  font-size: 13px;
  text-align: center;
}
#right_bottom_right_bottom_item {
  height: 90px;
}
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  height: 80px;
  line-height: 80px;
}
#logo {
  height: 80px;
  width: 100px;
  color: #333;
  font-size: 20px;
}
.el-dropdown-link {
  color: rgb(223, 48, 40);
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  cursor: default;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.search_text {
  float: left;
  height: 24px;
  line-height: 24px;
  color: #666;
  padding: 4px;
  margin-bottom: 4px;
  border-width: 2px 0 2px 2px;
  border-style: solid;
  outline: 0;
  font-size: 14px;
  width: 140px;
  border-color: #df3028;
  font-family: "microsoft yahei";
  margin-top: 20px;
}
.search_button {
  top: 20px;
  left: 140px;
  width: 62px;
  height: 36px;
  display: block;
  overflow: hidden;
  font-style: normal;
  background-color: #df3028;
  font-size: 14px;
  float: left;
  border: none;
  border-radius: 0;
  line-height: 1;
  color: #fff;
  font-family: "Microsoft YaHei";
  /* font-size: 16px; */
  cursor: pointer;
  line-height: 36px;
  position: absolute;
}
#personal .search {
  position: relative;
}
.shopping_cart {
  height: 36px;
  width: 210px;
  margin-left: 56px;
  margin-top: 20px;
  background-color: rgb(249, 249, 249);
  border: rgb(223, 223, 223) 1px solid;
  position: relative;
}
.shopping_cart_icon {
  height: 36px;
}
.shopping_cart_icon img {
  height: 20px;
  width: 20px;
  margin-bottom: 18px;
  margin-left: -5px;
  margin-top: 8px;
  position: absolute;
}
.shopping_cart_text {
  height: 36px;
  font-size: 13px;
  line-height: 36px;
  position: absolute;
  margin-left: 42px;
}
.shopping_cart_num {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  margin-left: 120px;
  margin-top: 9px;
  background-color: red;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
  position: absolute;
}
</style>